<template>

<div class="payment-voucher">
     <l-file-upload :disabled='disabled' :mods='mods' @success='success'  @deleteFile='deleteFile' ></l-file-upload>
</div>

</template>

<script lang='ts'>
import { Component, Prop, Vue } from 'vue-property-decorator'
import fileUpload from '@/components/ivew_components/file_upload/index.vue'
import router from '@/router/index'
import {store} from '@/store/index'


let vue:any = new Vue()

@Component({
    components: {
        'l-file-upload': fileUpload
    }
})
export default class paymentVoucher extends Vue{
    name:string = 'payment-voucher'
    
    @Prop()
    data

    @Prop()
    disabled:boolean

    get mods (){

        let _vue = this;

        return [{
            title: '支付凭证',
            url: _vue.data.payCertificateUrl
        }]
    }

    success({index, modsCache, response, file, fileList}){
        let orderId = router.currentRoute.query.orderId; 
        let currentMod = modsCache[index];
        let fileNumber = 0;
        
        currentMod.url = response.result.url;

        this.data['payCertificateUrl'] = currentMod.url
    }

    error({index, modsCache, response, file, fileList}){
        vue.$Notic({
            title: '文件上传失败, 请重试'
        })
    }
    
    deleteFile ({index, modsCache}){
        let orderId = router.currentRoute.query.orderId; 
        let currentMod =  modsCache[index];

        store.dispatch('request', {
            url: 'delete/files/id',
            data: {
                orderId,
                url: currentMod.url,
                title: currentMod.ttile,
            }
        }).then(success =>{
            currentMod.url = '';
        })

    }
    
}


</script>

<style scoped lang='scss'>

.payment-voucher{

    display: flex;
    justify-content: center;
    
}

</style>